<template>
	<view class="container">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>
		
		<!-- 头部区域 -->
		<view class="header">
			<view class="header-content">
				<view class="nav-left" @tap="goBack">
					<image class="back-icon" src="/static/icons/arrow_left.png"></image>
				</view>
				<text class="title">我的投标</text>
				<view class="search-box">
					<image class="search-icon" src="/static/icons/search.png"></image>
					<input class="search-input" type="text" v-model="searchKeyword" placeholder="搜索项目名称" confirm-type="search" @confirm="searchBids" />
				</view>
			</view>
		</view>
		
		<!-- 分类标签栏 -->
		<view class="tabs">
			<view 
				class="tab-item" 
				v-for="(tab, index) in tabs" 
				:key="index"
				:class="{ active: currentTab === tab.value }"
				@tap="switchTab(tab.value)"
			>
				<text class="tab-text">{{ tab.name }}</text>
				<text class="tab-badge" v-if="tab.count > 0">{{ tab.count }}</text>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<scroll-view scroll-y class="content" @scrolltolower="loadMore" refresher-enabled @refresherpulling="onPulling" @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing">
			<!-- 数据加载中 -->
			<view class="loading-container" v-if="isLoading && !bids.length">
				<view class="loading-spinner"></view>
				<text class="loading-text">加载中...</text>
			</view>
			
			<!-- 数据为空时 -->
			<view class="empty-container" v-if="!isLoading && !bids.length">
				<image class="empty-image" src="/static/images/empty-bids.png"></image>
				<text class="empty-text">{{ getEmptyText() }}</text>
				<button class="action-btn" @tap="navigateToProjects">查看项目</button>
			</view>
			
			<!-- 数据列表 -->
			<view class="bid-list" v-if="bids.length">
				<view class="bid-item" v-for="(bid, index) in bids" :key="index" @tap="navigateToBidDetail(bid.id)">
					<view class="project-info">
						<view class="top-info">
							<text class="project-title">{{ bid.title }}</text>
							<text class="bid-status" :class="getStatusClass(bid.status)">{{ getStatusText(bid.status) }}</text>
						</view>
						<view class="bid-meta">
							<text class="bid-price">￥{{ bid.price }}{{ bid.priceUnit }}</text>
							<text class="bid-duration">{{ bid.duration }}{{ bid.durationUnit }}</text>
						</view>
						<view class="company-info">
							<image class="company-logo" :src="bid.companyLogo"></image>
							<text class="company-name">{{ bid.companyName }}</text>
						</view>
					</view>
					<view class="bid-date">
						<text class="date-label">投标时间</text>
						<text class="date-value">{{ formatDate(bid.created_at) }}</text>
					</view>
					<view class="actions" v-if="bid.status === 'waiting'">
						<view class="action-item edit" @tap.stop="editBid(bid)">
							<image class="action-icon" src="/static/icons/edit.png"></image>
							<text class="action-text">修改</text>
						</view>
						<view class="action-item withdraw" @tap.stop="withdrawBid(bid)">
							<image class="action-icon" src="/static/icons/withdraw.png"></image>
							<text class="action-text">撤回</text>
						</view>
					</view>
					<view class="actions" v-else-if="bid.status === 'accepted'">
						<view class="action-item contact" @tap.stop="contactProject(bid)">
							<image class="action-icon" src="/static/icons/phone.png"></image>
							<text class="action-text">联系项目方</text>
						</view>
					</view>
				</view>
				
				<!-- 底部加载更多 -->
				<view class="load-more" v-if="hasMore">
					<view class="loading-spinner small"></view>
					<text class="loading-text">加载更多...</text>
				</view>
				<view class="load-more" v-else>
					<text class="loading-text">没有更多数据了</text>
				</view>
			</view>
		</scroll-view>
		
		<!-- 悬浮按钮 -->
		<view class="float-btn" @tap="navigateToProjects">
			<image class="float-btn-icon" src="/static/icons/plus.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKeyword: '',
				currentTab: 'all',
				isLoading: true,
				isRefreshing: false,
				hasMore: true,
				page: 1,
				pageSize: 10,
				tabs: [
					{ name: '全部', value: 'all', count: 0 },
					{ name: '审核中', value: 'waiting', count: 0 },
					{ name: '已中标', value: 'accepted', count: 0 },
					{ name: '未中标', value: 'rejected', count: 0 },
					{ name: '已完成', value: 'completed', count: 0 }
				],
				bids: []
			}
		},
		onLoad() {
			const ishave = uni.getStorageSync("token")
			uni.request({
				url:'http://115.190.38.218/go/api/v1/check/ck',
				method:'GET',
				header: { 'Content-Type': 'application/json' ,
				  'Authorization': `Bearer ${ishave}` // 关键！格式必须为 "Bearer {token}"
				},
				success: (res) => {
					console.log("验证结果：",res)
					if(res.data.error == "无效令牌"){
						uni.showToast({
							title:"过期，重新登录",
							icon:'error'
						})
						
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}
				},
				fail: (err) => {
					console.log("验证失败：",err)
				}
			})
			this.loadBids();
		},
		methods: {
			// 加载投标列表
			loadBids() {
				this.isLoading = true;
				const token = uni.getStorageSync("token")
				const info = uni.getStorageSync("info")
				console.log("类型：",info.id_card)
				uni.request({
					url: `http://115.190.38.218/go/api/v1/bids/user/${info.id_card}`,
					
					header: { 
					  'Authorization': `Bearer ${token}` // 关键！格式必须为 "Bearer {token}"
					},
					method:'GET',
					success:(res)=>{
						console.log("获取投标信息成功！",res)
						// 根据当前选中的标签筛选数据
						// 根据当前选中的标签筛选数据
						let filteredData = res.data;
						if (this.currentTab !== 'all') {
							filteredData = res.data.filter(item => item.status === this.currentTab);
						}
						
						// 如果有搜索关键词，进一步筛选
						if (this.searchKeyword) {
							const keyword = this.searchKeyword.toLowerCase();
							filteredData = filteredData.filter(item => 
								item.projectTitle.toLowerCase().includes(keyword) ||
								item.companyName.toLowerCase().includes(keyword)
							);
						}
						
						// 更新数据
						this.bids = filteredData;
						
						// 更新标签计数
						this.updateTabCounts(res.data);
						
						// 更新加载状态
						this.isLoading = false;
						this.isRefreshing = false;
						
						// 假设只有一页数据
						this.hasMore = false;
					},
					fail:(err)=>{
						console.log("获取失败：",err)
					}
				})
				// 模拟API调用
				// setTimeout(() => {
				// 	// 模拟数据
				// 	const mockData = [
				// 		{
				// 			id: '1',
				// 			projectId: '101',
				// 			projectTitle: '智能制造设备采购项目',
				// 			price: '680',
				// 			priceUnit: '万元',
				// 			duration: '90',
				// 			durationUnit: '天',
				// 			submitTime: '2023-06-10 15:32:45',
				// 			status: 'waiting',
				// 			companyName: '上海智能制造有限公司',
				// 			companyLogo: '/static/images/company-logo1.png'
				// 		},
				// 		{
				// 			id: '2',
				// 			projectId: '102',
				// 			projectTitle: '企业信息系统开发项目',
				// 			price: '120',
				// 			priceUnit: '万元',
				// 			duration: '60',
				// 			durationUnit: '天',
				// 			submitTime: '2023-06-08 10:15:30',
				// 			status: 'accepted',
				// 			companyName: '北京信息技术有限公司',
				// 			companyLogo: '/static/images/company-logo2.png'
				// 		},
				// 		{
				// 			id: '3',
				// 			projectId: '103',
				// 			projectTitle: '大型物流仓储设备采购',
				// 			price: '450',
				// 			priceUnit: '万元',
				// 			duration: '120',
				// 			durationUnit: '天',
				// 			submitTime: '2023-06-05 09:45:18',
				// 			status: 'rejected',
				// 			companyName: '广州物流科技有限公司',
				// 			companyLogo: '/static/images/company-logo3.png'
				// 		},
				// 		{
				// 			id: '4',
				// 			projectId: '104',
				// 			projectTitle: '工业自动化设备升级改造',
				// 			price: '320',
				// 			priceUnit: '万元',
				// 			duration: '75',
				// 			durationUnit: '天',
				// 			submitTime: '2023-05-28 14:20:35',
				// 			status: 'completed',
				// 			companyName: '深圳自动化工程有限公司',
				// 			companyLogo: '/static/images/company-logo4.png'
				// 		}
				// 	];
					
					
				// }, 1000);
			},
			goBack(){
				uni.navigateBack()
			},
			// 更新标签计数
			updateTabCounts(data) {
				// 获取每个状态的数量
				const statusCounts = data.reduce((counts, item) => {
					counts[item.status] = (counts[item.status] || 0) + 1;
					return counts;
				}, {});
				
				// 更新标签计数
				this.tabs = this.tabs.map(tab => {
					if (tab.value === 'all') {
						tab.count = data.length;
					} else {
						tab.count = statusCounts[tab.value] || 0;
					}
					return tab;
				});
			},
			
			// 切换标签
			switchTab(tabValue) {
				if (this.currentTab !== tabValue) {
					this.currentTab = tabValue;
					this.page = 1;
					this.bids = [];
					this.hasMore = true;
					this.loadBids();
				}
			},
			
			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					'waiting': '审核中',
					'accepted': '已中标',
					'rejected': '未中标',
					'completed': '已完成'
				};
				return statusMap[status] || '未知状态';
			},
			
			// 获取状态类名
			getStatusClass(status) {
				return `status-${status}`;
			},
			
			// 格式化日期
			formatDate(dateString) {
				const date = new Date(dateString);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			
			// 下拉刷新
			onPulling() {
				// 下拉刷新触发时的回调
			},
			
			onRefresh() {
				// 处理刷新逻辑
				this.isRefreshing = true;
				this.page = 1;
				this.bids = [];
				this.hasMore = true;
				this.loadBids();
			},
			
			// 上拉加载更多
			loadMore() {
				if (this.hasMore && !this.isLoading) {
					this.page++;
					this.loadBids();
				}
			},
			
			// 搜索投标
			searchBids() {
				this.page = 1;
				this.bids = [];
				this.hasMore = true;
				this.loadBids();
			},
			
			// 获取空状态文本
			getEmptyText() {
				if (this.searchKeyword) {
					return '没有找到匹配的投标记录';
				}
				
				const emptyTextMap = {
					'all': '您还没有投标记录',
					'waiting': '没有审核中的投标',
					'accepted': '没有已中标的项目',
					'rejected': '没有未中标的记录',
					'completed': '没有已完成的项目'
				};
				
				return emptyTextMap[this.currentTab] || '没有相关记录';
			},
			
			// 导航到投标详情
			navigateToBidDetail(bidId) {
				uni.navigateTo({
					url: `/pages/bid/bid-detail?id=${bidId}`
				});
			},
			
			// 导航到项目列表
			navigateToProjects() {
				uni.switchTab({
					url: '/pages/project/project-list'
				});
			},
			
			// 修改投标
			editBid(bid) {
				uni.navigateTo({
					url: `/pages/bid/bid-form?id=${bid.id}&projectId=${bid.projectId}&mode=edit`
				});
			},
			
			// 撤回投标
			withdrawBid(bid) {
				uni.showModal({
					title: '撤回投标',
					content: '确定要撤回此投标吗？撤回后将无法恢复。',
					success: (res) => {
						if (res.confirm) {
							// 在实际项目中应该调用API撤回投标
							uni.showToast({
								title: '投标已撤回',
								icon: 'success'
							});
							// 重新加载数据
							setTimeout(() => {
								this.loadBids();
							}, 1500);
						}
					}
				});
			},
			
			// 联系项目方
			contactProject(bid) {
				uni.showActionSheet({
					itemList: ['拨打电话', '发送邮件', '复制联系人信息'],
					success: (res) => {
						switch (res.tapIndex) {
							case 0:
								// 模拟拨打电话
								uni.makePhoneCall({
									phoneNumber: '13800138000',
									fail: () => {
										uni.showToast({
											title: '拨打电话失败',
											icon: 'none'
										});
									}
								});
								break;
							case 1:
								// 模拟发送邮件
								uni.showToast({
									title: '即将跳转到邮件应用',
									icon: 'none'
								});
								break;
							case 2:
								// 模拟复制联系人信息
								uni.setClipboardData({
									data: '联系人：项目经理 电话：13800138000 邮箱：project@example.com',
									success: () => {
										uni.showToast({
											title: '联系信息已复制',
											icon: 'success'
										});
									}
								});
								break;
						}
					}
				});
			}
		}
	}
</script>

<style>
	.nav-left{
		height: 50rpx;
	}
	.back-icon{
		width: 40rpx;
		height: 40rpx;
	}
	.container {
		min-height: 100vh;
		background-color: #f5f7fa;
		display: flex;
		flex-direction: column;
	}
	
	.status-bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #1d4ed8;
	}
	
	.header {
		background-color: #1d4ed8;
		padding: 20rpx 30rpx 40rpx;
	}
	
	.header-content {
		display: flex;
		flex-direction: column;
	}
	
	.title {
		font-size: 44rpx;
		font-weight: 600;
		color: #fff;
		margin-bottom: 30rpx;
	}
	
	.search-box {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 40rpx;
		padding: 15rpx 25rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.search-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 15rpx;
	}
	
	.search-input {
		flex: 1;
		height: 40rpx;
		font-size: 28rpx;
	}
	
	.tabs {
		display: flex;
		background-color: #fff;
		padding: 0 20rpx;
		position: relative;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 10;
	}
	
	.tab-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		padding: 25rpx 10rpx;
	}
	
	.tab-text {
		font-size: 28rpx;
		color: #666;
		position: relative;
		padding-right: 15rpx;
	}
	
	.tab-badge {
		position: absolute;
		top: -8rpx;
		right: -12rpx;
		min-width: 36rpx;
		height: 36rpx;
		line-height: 36rpx;
		text-align: center;
		background-color: #f43f5e;
		color: #fff;
		font-size: 20rpx;
		border-radius: 18rpx;
		padding: 0 8rpx;
	}
	
	.tab-item.active {
		font-weight: 600;
	}
	
	.tab-item.active .tab-text {
		color: #1d4ed8;
	}
	
	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 6rpx;
		background-color: #1d4ed8;
		border-radius: 3rpx;
	}
	
	.content {
		flex: 1;
		position: relative;
	}
	
	.loading-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 100rpx 0;
	}
	
	.loading-spinner {
		width: 80rpx;
		height: 80rpx;
		border: 6rpx solid #e0e0e0;
		border-top-color: #1d4ed8;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 20rpx;
	}
	
	.loading-spinner.small {
		width: 36rpx;
		height: 36rpx;
		border-width: 4rpx;
		margin-bottom: 0;
		margin-right: 15rpx;
	}
	
	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}
	
	.loading-text {
		font-size: 26rpx;
		color: #999;
	}
	
	.empty-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 100rpx 30rpx;
	}
	
	.empty-image {
		width: 240rpx;
		height: 240rpx;
		margin-bottom: 30rpx;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 40rpx;
		text-align: center;
	}
	
	.action-btn {
		background-color: #1d4ed8;
		color: #fff;
		font-size: 28rpx;
		font-weight: 500;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		padding: 0 60rpx;
	}
	
	.bid-list {
		padding: 30rpx;
	}
	
	.bid-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.05);
	}
	
	.project-info {
		border-bottom: 1px solid #f0f0f0;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.top-info {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 15rpx;
	}
	
	.project-title {
		flex: 1;
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		line-height: 1.4;
		margin-right: 20rpx;
	}
	
	.bid-status {
		font-size: 24rpx;
		padding: 6rpx 20rpx;
		border-radius: 20rpx;
	}
	
	.status-waiting {
		background-color: #fff7ed;
		color: #f59e0b;
	}
	
	.status-accepted {
		background-color: #ecfdf5;
		color: #10b981;
	}
	
	.status-rejected {
		background-color: #fef2f2;
		color: #ef4444;
	}
	
	.status-completed {
		background-color: #f1f5f9;
		color: #6366f1;
	}
	
	.bid-meta {
		display: flex;
		margin-bottom: 20rpx;
	}
	
	.bid-price {
		font-size: 36rpx;
		font-weight: 600;
		color: #f59e0b;
		margin-right: 30rpx;
	}
	
	.bid-duration {
		font-size: 28rpx;
		color: #666;
		display: flex;
		align-items: center;
	}
	
	.company-info {
		display: flex;
		align-items: center;
	}
	
	.company-logo {
		width: 50rpx;
		height: 50rpx;
		border-radius: 8rpx;
		margin-right: 15rpx;
	}
	
	.company-name {
		font-size: 26rpx;
		color: #666;
	}
	
	.bid-date {
		display: flex;
		justify-content: space-between;
		padding: 15rpx 0;
		border-bottom: 1px solid #f0f0f0;
		margin-bottom: 20rpx;
	}
	
	.date-label {
		font-size: 26rpx;
		color: #666;
	}
	
	.date-value {
		font-size: 26rpx;
		color: #333;
	}
	
	.actions {
		display: flex;
		justify-content: flex-end;
	}
	
	.action-item {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12rpx 25rpx;
		border-radius: 30rpx;
		margin-left: 20rpx;
	}
	
	.action-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}
	
	.action-text {
		font-size: 26rpx;
	}
	
	.edit {
		background-color: #f0f9ff;
		color: #0ea5e9;
	}
	
	.withdraw {
		background-color: #fef2f2;
		color: #ef4444;
	}
	
	.contact {
		background-color: #ecfdf5;
		color: #10b981;
	}
	
	.load-more {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
	}
	
	.float-btn {
		position: fixed;
		right: 40rpx;
		bottom: 80rpx;
		width: 100rpx;
		height: 100rpx;
		background-color: #1d4ed8;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 6rpx 20rpx rgba(29, 78, 216, 0.3);
		z-index: 100;
	}
	
	.float-btn-icon {
		width: 50rpx;
		height: 50rpx;
	}
</style> 